<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web socket</title>
</head>


<script type="text/javascript">
    var ws;
    var sid = Math.random() * 100000
    //  WebSocket 连接地址
    var host = window.location.host;
    var url = "ws://" + host + "/webSocket/" + sid;

    if ("WebSocket" in window) {
        createWebSocket();
    } else {
        var errorMsg = "浏览器不支持 WebSocket!";
        alert(errorMsg);
        console.log(errorMsg);
    }

    // 创建链接
    function createWebSocket() {
        if (ws && ws.readyState == 1) {
            alert("当前连接存在");
            return;
        }

        ws = new WebSocket(url);
        /**
         * WebSocket 的事件
         * 每次创建连接都需要出从新绑定
         */

        // 建立连接后的回调函数
        ws.onopen = function (event) {
            console.log("连接成功！")
            console.log(event);

        };
        // 收到服务端消息的回调函数
        ws.onmessage = function (event) {
            var result = event.data
            var data = JSON.parse(result);
            console.log("收到消息:" + result);

            switch (data.type) {
                case "onlineCount":
                    document.getElementById("onlineCount").innerText = data.data;
                    break;
                case "single":
                    var ul = document.getElementById("single");
                    ul.innerHTML = ul.innerHTML + "<li>" + result + "</li>"
                    break;
                case "group":
                    var ul = document.getElementById("group");
                    ul.innerHTML = ul.innerHTML + "<li>" + result + "</li>"
                    break;
            }
        };
        // 通信错误的回调函数
        ws.onerror = function (event) {
            console.log("通信错误！")
            console.log(event);
        };

        // 连接关闭的回调函数
        ws.onclose = function (event) {
            console.log("连接关闭！")
            document.getElementById("onlineCount").innerText = "";
            console.log(event);
        }
    }

    // 心跳检测
    window.setInterval(function () {
        // 当前处于连接状态
        if (ws && ws.readyState == 1) {
            var message = {
                type: "heartbeat",
                data: "心跳检测"
            }
            ws.send(JSON.stringify(message));
        }
        // 连接已断开
        if (ws && ws.readyState == 3) {
            // 当前连接被关闭重新创建连接
            createWebSocket();
        }
    }, 10000);


    /**
     * WebSocket 的方法
     */

    // 发送数据
    function send() {
        if (!ws || ws.readyState == 3) {
            alert("请先创建连接！");
            return;
        }
        var data = document.getElementById("data").value;
        var message = {
            type: "single",
            data: data
        };
        ws.send(JSON.stringify(message));
    }

    // 关闭连接
    function closeWebSocket() {
        if (!ws || ws.readyState == 3) {
            alert("当前无链接！");
            return;
        }
        ws.close();
    }

    // 群发消息
    function sendGroup() {
        if (!ws || ws.readyState == 3) {
            alert("请先创建连接！");
            return;
        }
        var data = document.getElementById("data").value;
        var message = {
            type: "group",
            data: data
        }
        ws.send(JSON.stringify(message));
    }


</script>

<div>
    请输入要向服务端发送的数据：<input id="data"/>
    <button onclick="send()">发送数据</button>
    <button onclick="sendGroup()">群发消息</button>
</div>

<div>
    <button onclick="closeWebSocket()">关闭连接</button>
</div>

<p>
    当前在线人数：<span id="onlineCount"></span>
</p>

<div>
    <p>当前客户端发送的消息</p>
    <ul id="single"></ul>
</div>
<div>
    <p>群发消息</p>
    <ul id="group"></ul>
</div>

</body>
</html>
